/**
 * #info
 *
 *@author   wuwg
 *@createTime   2018/03/20
 *@updateTime   2018/03/21
 *@description  progress  component， 进度条组件。
 */
/**
 * #item
 *
 * @type        aty-progress
 * @cn          进度条
 * @menu        数据
 * @stPlugin    true
 * @stContainer false
 * @children   [aty-icon,aty-text,aty-link,aty-panel]
 */
/**
 * #extendproperty
 *
 * @name    slot
 * @cn      slot插槽
 * @options [default]
 * @type    list
 * @description  default插槽，用于默认插入一些提示信息
 */
import config from '../../../config/config.js'
// components
import Icon from '../../basic/icon/index.vue'
// prefix
const prefixCls = config.prefix + '-progress'
// module
export default {
  components: {
    Icon
  },
  props: {
    /**
     * #property
     *
     * @name     percent
     * @cn      百分比
     * @type    number
     * @bind    must
     * @value   0
     * @description 当前的百分比进度
     */
    percent: {
      type: Number,
      default: 0
    },
    /**
     * #property
     *
     * @name     status
     * @cn      状态
     * @type    list
     * @options [normal, active, wrong, success]
     * @value   normal
     * @description 当前进度下的状态，取值为[normal, active, wrong, success]中的其中一个
     */

    // 状态，可选值为normal、active、wrong、success
    status: {
      validator(value) {
        return Artery.isOneOf(value, ['normal', 'active', 'wrong', 'success'])
      },
      default: 'normal'
    },
    /**
     * #property
     *
     * @name    hideInfo
     * @cn      隐藏数值或状态图标
     * @type    boolean
     * @bind    must
     * @value   false
     * @description 隐藏数值或状态图标
     */
    hideInfo: {
      type: Boolean,
      default: false
    },
    /**
     * #property
     *
     * @name    strokeWidth
     * @cn      进度条的线宽
     * @type    number
     * @bind    must
     * @value   10
     * @description Number类型，进度条的线宽，单位 px
     */
    strokeWidth: {
      type: Number,
      default: 10
    },
    /**
     * #property
     *
     * @name    strokeColor
     * @cn      进度条渐变色
     * @type    string
     * @description 进度条的颜色，linear-gradient的实现，如果需要实现自定义单色，请传入(to right, color, color)
     */
    strokeColor: String,
    /**
     * #property
     *
     * @name    vertical
     * @cn      是否垂直方向
     * @type    boolean
     * @bind    must
     * @value   false
     * @description 是否垂直方向
     */
    vertical: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentStatus: this.status
    }
  },
  watch: {
    percent(val, oldVal) {
      if (val < oldVal) {
        this.handleStatus(true)
      } else {
        this.handleStatus()
      }
    },
    status(val) {
      this.currentStatus = val
    }
  },
  computed: {
    statusIcon() {
      let type = ''
      switch (this.currentStatus) {
        case 'wrong':
          type = 'ios-close'
          break
        case 'success':
          type = 'ios-checkmark'
          break
      }

      return type
    },
    bgStyle() {
      const style = this.vertical ? {
        height: `${this.percent}%`,
        width: `${this.strokeWidth}px`
      } : {
        width: `${this.percent}%`,
        height: `${this.strokeWidth}px`
      }

      if (this.strokeColor && typeof this.strokeColor === 'string') {
        style['background-image'] = `linear-gradient(${this.strokeColor})`
      }

      return style
    },
    wrapClasses() {
      return [
        `${prefixCls}`,
        `${prefixCls}-${this.currentStatus}`,
        {
          [`${prefixCls}-show-info`]: !this.hideInfo,
          [`${prefixCls}-vertical`]: this.vertical
        }
      ]
    },
  },
  methods: {
    handleStatus(isDown) {
      if (isDown) {
        this.currentStatus = 'normal'
        this.$emit('on-status-change', 'normal')
      } else {
        if (parseInt(this.percent, 10) == 100) {
          this.currentStatus = 'success'
          this.$emit('on-status-change', 'success')
        }
      }
    }
  },
  created() {
    this.handleStatus()
  }
}
